<template>
<div class="Back">
   <!-- <div class="BackImageBox">
       <img :src="ArticleDetail.cover" class="img">
   </div> -->
   <div id="DiscussWrite">
      <DwTitle  id="DwTitle" class="flex"/>
      <DWContent id="DWContent"  class="overflow-auto"/>
   </div>

</div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
import DWContent from './DWContent/DWContent.vue'
import DwTitle from './DWTittle/DwTitle.vue'
  export default 
  {
     components: { DwTitle, DWContent },
     name :'', 
     computed:{
       ...mapState('ArticleDetail',['ArticleDetail'])
     },   
     methods:{
        ...mapMutations('Discuss',['FILTERDISCUSS'])
     },
     mounted(){
          document.body.style.overflow='hidden'
          this.FILTERDISCUSS()
     },
     beforeDestroy() {
         document.body.style.overflow='auto'
     },
  }
</script>
<style scoped lang='less'>
@media screen and (max-width: 1000px) {
   // div#DiscussWrite{
   //    width: 100vw;
   //    height: 100vh;
   //    border-radius: 0px;
   // }
}
.Back{
   z-index: 1000;
}

#DiscussWrite{
   width: 800px;
   min-width: 350px;
   max-width: 90%;
   border-radius: 10px;
   background:var(--GeneralBackColor-half);
   overflow: hidden;
   position: relative;
   z-index: 5;
}
#DwTitle{
   width: 100%;
   height: 50px;
   background:var(--GeneralBackColor);
   padding: 0 10px;
   box-sizing: border-box;
   justify-content: space-between;
}
#DWContent{
   width: 100%;
   padding: 0 20px;
   box-sizing: border-box;
   margin: 20px 0;
}

</style>